<template>
	<view class="main">
		<view class="header">社区活动</view>
		<view class="activity-list">
			<view v-for="(activity, index) in activities" :key="index" class="activity-item">
				<view class="activity-title">{{ activity.title }}</view>
				<view class="activity-info">
					<text class="activity-time">时间: {{ activity.time }}</text>
					<text class="activity-location">地点: {{ activity.location }}</text>
					<text class="activity-quota">剩余名额: {{ activity.remainingQuota }}</text>
				</view>
				<button class="join-button" :disabled="activity.remainingQuota <= 0" @click="joinActivity(activity)" >
					{{ activity.remainingQuota > 0 ? "参与活动" : "名额已满" }}
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
import { toast } from "../../../uni_modules/uv-ui-tools/libs/function";

	// 模拟活动列表数据
	const activities = ref([{
			title: "社区大扫除",
			time: "2024-11-25 09:00",
			location: "社区广场",
			remainingQuota: 5
		},
		{
			title: "爱心义卖",
			time: "2024-12-01 14:00",
			location: "社区礼堂",
			remainingQuota: 0
		},
		{
			title: "书法比赛",
			time: "2024-12-05 10:00",
			location: "文化中心",
			remainingQuota: 10
		},
	]);

	// 参与活动事件
	const joinActivity = (activity) => {
		if (activity.remainingQuota > 0) {
			activity.remainingQuota--;
			toast(`成功报名参与活动：${activity.title}`);
		} else {
			alert(`抱歉，${activity.title} 的名额已满！`);
		}
	};
</script>

<style>
	.main {
		min-height: 100vh;
		background-color: rgb(238, 238, 238);
		padding: 2vw;
	}

	.header {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 2vw;
		text-align: center;
	}

	.activity-list {
		display: flex;
		flex-direction: column;
		gap: 2vw;
	}

	.activity-item {
		background-color: #fff;
		padding: 2vw;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.activity-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 1vw;
	}

	.activity-info {
		font-size: 14px;
		color: #666;
		margin-bottom: 1vw;
	}

	.activity-time,
	.activity-location,
	.activity-quota {
		display: block;
	}

	.join-button {
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 5px 10px;
		font-size: 14px;
		cursor: pointer;
	}

	.join-button:disabled {
		background-color: #ccc;
		cursor: not-allowed;
	}

	.join-button:hover:not(:disabled) {
		background-color: #005ecb;
	}
</style>